<template>
<div id="cart" class="bg-assist">
	<sub-page-header title="购物车">
		<span v-show="carts.length" @click="edit=!edit" slot="right" class="text-assist">{{edit ? '完成' : '编辑'}}</span>
	</sub-page-header>
	<div v-if="carts.length == 0" class="text-center" style="margin-top: 100px;">
	    <img class="none-trolley" src="../assets/trolley.png" alt="">
	    <div class="none-tip">购物车未添加任何商品</div>
	</div>
	<div class="carts">
		<div v-for="(cart, index) in carts" class="cart" @scroll="onScroll">
			<el-row>
				<el-col :span="10">
					<el-checkbox class="radio" v-model="cart.checked" label=""></el-checkbox>
					<router-link :to="'/goods/detail/'+cart.product_id">
						<img class="thumbnail" :src="cart.thumbnail" alt="">
					</router-link>
				</el-col>
				<el-col :span="14">
					<h5>{{cart.p_title}}</h5>
					<div class="text-assist">
						<p>规格：{{cart.i_title}}</p>
						<p>重量：{{cart.weight}}克 库存：{{cart.stock}}</p>
					</div>
					<div>
						<span class="text-price">£{{(cart.price*cart.qty).toFixed(2)}}</span>
						<el-input-number :min="1" @change="saveCount($event, cart)" v-model="cart.qty" size="small" class="pull-right"></el-input-number>
					</div>
				</el-col>
				<div class="btn-box">
					<button @click="favorite(cart, index)">加入收藏夹</button><button @click="remove(cart, index)" class="btn-normal">删除</button>
				</div>
			</el-row>
		</div>
	</div>
	<div v-show="carts.length" class="footer">
		<el-checkbox class="all-select" v-model="allSelect" label="1"> 全选</el-checkbox>
		<!-- <span class="all-select"><i class="iconfont icon-yuan"></i> 全选</span> -->
		<div class="pull-right">
			<div v-show="!edit" class="info">
				<p style="margin-top: 20px;">合计：<span class="text-price">£{{total_fee}}</span></p>
				<!-- <p>加积分：<span class="text-price">{{total_credits}}</span></p> -->
			</div>
			<div v-show="edit" class="pull-right">
				<button @click="favoriteAll" v-show="edit">移至收藏夹</button><button @click="removeAll" v-show="edit" class="btn-normal">删除</button>
			</div>
			<button @click="goPay" v-show="!edit" class="pull-right btn-normal">去结算</button>

		</div>
	</div>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import api from '~/api/api.js';
import SubPageHeader from '~/components/SubPageHeader.vue';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			edit : false,
			allSelect: false,
			carts: []
		}
	},
	computed: {
		total_fee: function () {
			let total_fee = 0;
			this.carts.forEach(function (item) {
				total_fee += item.checked ? parseFloat(item.price)*parseInt(item.qty) : 0;
			});

			return total_fee.toFixed(2);
		},
		total_credits: function () {
			let total_credits = 0;
			this.carts.forEach(function (item) {
				total_credits += item.checked ? 0 : 0;
			});
		}
	},
	watch : {
		allSelect : function (value) {
			this.carts.forEach(item => {
				item.checked = value;
			});
		}
	},
	created () {
		this.$store.dispatch('getCart')
		.then(() => {
			this.carts = this.$store.state.carts;
			this.carts.forEach(item => {
				this.$set(item, 'checked', false);
			})
		});
	},
	methods: {
		// 保存购物车数量更改
		saveCount (value, cart) {
			this.$store.dispatch('changeCartQty', {
				cart,
				value
			})
		},
		onScroll (e) {
			var target = e.target;
			if (target.scrollLeft > 10 && target.scrollLeft < 250) {
				target.scrollLeft = target.scrollWidth;
			}
			if (target.scrollLeft > 250) {
				target.scrollLeft = 0;
				return false;
			}
		},
		// 加入收藏夹
		favorite (cart, index) {
			this.$store.dispatch('favoriteCartReversal', cart)
			.then(() => {
				this.$message.success('操作成功');
			})
			.catch(error => {
				this.$message.error(error.response.data.error);
			});
		},
		// 删除
		remove (cart, index) {
			var vue = this;
			this.$store.dispatch('removeCart', cart)
			.catch(error => {
				this.$message.error('删除失败');
			});
		},
		favoriteAll () {
			let product_ids = [];
			this.carts.forEach(item => {
				if(item.checked) {
					product_ids.push(item.product_id);
					this.$store.commit('setCartFavorite', item);
				}
			});
			if (product_ids.length) {
				api.post('/favorite/mulite_add', {
					product_ids
				})
				.then(response => {
					this.$message.success('添加成功');
				});
			} else {
				this.$message.warning('请选择商品');
			}
		},
		removeAll () {
			let ids = [];
			this.carts.forEach(item => {
				if (item.checked) {
					ids.push(item.id);
				}
			});

			if (ids.length) {
				api.post('cart/removeAll', {
					ids
				})
				.then(response => {
					this.$message.success('删除成功');
					for(let i = 0; i < this.carts.length; i++) {
						if (this.carts[i].checked) {
							this.$store.commit('removeCart', this.carts[i]);
							i--;
						}
					}
				})
			} else {
				this.$message.warning('请选择商品');
			}
		},
		goPay () {
			let vue = this;
			let ids = [];
			let qtys = [];
			vue.carts.forEach(function (item) {
				if (item.checked) {
					ids.push(item.item_id);
					qtys.push(item.qty);
				}
			});
			if (ids.length) {
				api.post('/order/create', {
					item_id: ids,
					qty: qtys
				})
				.then(function (response) {
					vue.$router.push('/order/pay/'+response.data.id);
				})
				.catch(function (error) {
					vue.$message.error(error.errors.chinese || '创建订单失败');
				});
			} else {
				vue.$message.warning('请选择商品');
			}

		}
	}
}
</script>

<style scoped>
#cart {
	min-height: 500px;
	width: 100%;
	overflow: hidden;
	margin-bottom: 60px;
}
.cart {
	padding: 10px 15px;
	margin-bottom: 10px;
	background-color: #fff;
	font-size: 12px;
	position: relative;
	/*width: 100%;*/
	overflow: scroll;
}
.cart .radio {
	float: left;
	margin-top: 50px;
}

.cart .thumbnail {
	margin:20px 5px 0px 5px;
	height: 84px;
	width: 84px;
}

.cart .btn-box {
	position: absolute;
	top:0px;
	bottom: 0px;
	right: -135px;
}

.cart .btn-box button {
	width: 60px;
	text-align: center;
	border: none;
	padding: 10px;
	float: left;
	height: 100%;
}

.cart .text-price {
	line-height: 30px;
}

.cart .el-input-number {
	margin-right: 25px;
}

.footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid #eaeaea;
	z-index: 9999;
}

.footer .all-select {
	line-height: 55px;
	margin-left: 10px;
}

.footer .info {
	display: inline-block;
	font-size: 12px;
	margin-right: 10px;
}
.footer button {
	height: 55px;
    padding: 0px 20px;
    border: none;
}
</style>
